<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单管理左侧</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
<link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${ctx}/resources/layui_ext/dtree/font/dtreefont.css">	</head>
<body>
<ul id="menuTree" class="dtree" data-id="0"></ul>
<script src="${ctx}/resources/layui/layui.js"></script>
<script>
	var menuTree;
	layui.extend({
	    dtree: '${ctx}/resources/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
	  }).use(['layer','dtree'], function() {
		var $ = layui.$;
		var layer = layui.layer;
		var dtree = layui.dtree;
		// 初始化树
	    menuTree = dtree.render({
	      elem: "#menuTree",
	      //开启复选框
	      //checkbar:true,
	      //checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
	      //layui风格+list集合数据
	      dataStyle: "layuiStyle",  //使用layui风格的数据格式
		  dataFormat: "list",  //配置data的风格为list
		  response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
	      //这个response似乎不需要，官方演示有，但是我要不加才能成功
	      url: "${ctx}/menu/loadMenuTreeLeft.action" // 使用url加载（可与data加载同时存在）
	    });
	 	// 绑定节点点击
	    dtree.on("node('menuTree')" ,function(obj){
	     	layer.msg(JSON.stringify(obj.param));
	    });
	  //监听树结点的点击事件
        dtree.on("node(menuTree)",function (obj) {
            // console.log(obj);
            window.parent.right.reloadTableData(obj.param.nodeId);

        });
	});
	
	
</script>
</body>
</html>